<script setup lang='tsx' name='Recommend'>
import { bannerApi, personalizedSongApi, privatecontentApi, newSongApi, recommendMVApi } from '@/api'
import type { BannerItem, NewSongItem, SongSheetItem } from '@/views/base/discover/types';
import { ref, computed } from 'vue';
import { ArrowBack, ArrowForward, Play } from "@vicons/ionicons5";
import { toCurrRem } from '@/utils/rem'
import RecommendEvery from './components/recommend-every.vue'
import { Play20Regular } from '@vicons/fluent'
import { handlePlayCount } from '@/utils'
import { useRouter } from 'vue-router'
const router = useRouter()
// 轮播图模块
function useBanner() {
    const proportion = 1080 / 400
    const bannerH = ref(300)
    const bannerW = computed(() => bannerH.value * proportion)

    const bannerRemH = computed(() => toCurrRem(bannerH.value))
    const bannerRemW = computed(() => toCurrRem(bannerW.value))
    const bannerList = ref<BannerItem[]>([])
    async function getBanner() {
        const { banners } = await bannerApi()
        bannerList.value = banners
    }
    getBanner()
    return { bannerRemH, bannerRemW, bannerList }
}
const { bannerRemH, bannerRemW, bannerList } = useBanner()

// 推荐歌单模块
function useRecommendSongs() {
    const songList = ref<SongSheetItem[]>([])
    const getSongList = async () => {
        const res = await personalizedSongApi()
        songList.value = res.result
    }
    function handleRecommendClick(id) {
        router.push(`/songsheet?id=${id}`)
    }
    getSongList()
    return {
        songList, handleRecommendClick
    }
}
const { songList, handleRecommendClick } = useRecommendSongs()

// 独家推送
function usePrivate() {
    const privateList = ref([])
    async function getPrivate() {
        const { result } = await privatecontentApi()
        privateList.value = result
    }
    getPrivate()
    return {
        privateList
    }
}
const { privateList } = usePrivate()

// 新歌推荐
function useNewSong() {
    const newSongList = ref<NewSongItem[]>([])
    async function getNewSong() {
        const { result } = await newSongApi()
        newSongList.value = result
    }
    getNewSong()
    return { newSongList }
}
const { newSongList } = useNewSong()

// 推荐mv
function useRecommendMv() {
    const mvList = ref([])
    async function getMv() {
        const { result } = await recommendMVApi()
        mvList.value = result
    }
    getMv()
    return { mvList }
}
const { mvList } = useRecommendMv()

// 播客//暂时没有接口
// function usePodcast() {
//     const playerList = ref([])
//     async function getPlayer() {
//         const { result } = await privatecontentApi()
//         playerList.value = result
//     }
//     getPlayer()
//     return { playerList }
// }
</script>

<template>
    <div class='recommend'>
        <!-- 轮播图 -->
        <n-carousel class="carousel" effect="card" trigger="hover" :interval="3000" draggable autoplay show-arrow
            prev-slide-style="transform: translateX(-150%) translateZ(-800px);"
            next-slide-style="transform: translateX(50%) translateZ(-800px);" :style="{ boxSizing: 'border-box' }"
            :show-dots="true">
            <n-carousel-item class="carousel-item" v-for="item in bannerList" :key="item.targetId">
                <div class="position-relative">
                    <img class="carousel-img" :src="item.imageUrl">
                    <span class="carousel-title">{{ item.typeTitle }}</span>
                </div>
            </n-carousel-item>
            <template #arrow="{ prev, next }">
                <div class="custom-arrow">
                    <button type="button" class="custom-arrow--left" @click="prev">
                        <n-icon>
                            <ArrowBack />
                        </n-icon>
                    </button>
                    <button type="button" class="custom-arrow--right" @click="next">
                        <n-icon>
                            <ArrowForward />
                        </n-icon>
                    </button>
                </div>
            </template>
            <template #dots="{ total, currentIndex, to }">
                <ul class="custom-dots">
                    <li v-for="index of total" :key="index" :class="{ ['is-active']: currentIndex === index - 1 }"
                        @mouseenter="to(index - 1)" />
                </ul>
            </template>
        </n-carousel>
        <!-- 推荐歌单 -->
        <div class='recommend-song'>
            <TitleNav title="推荐歌单"></TitleNav>
            <n-grid :x-gap="12" :y-gap="8" :cols="5">
                <n-grid-item>
                    <RecommendEvery title="每日歌曲推荐"></RecommendEvery>
                </n-grid-item>
                <n-grid-item v-for="item in songList" :key="item.id">
                    <SongSheetItem @click="handleRecommendClick(item.id)" :title="item.name" :playCount="item.playCount"
                        :imgUrl="item.picUrl"></SongSheetItem>
                </n-grid-item>
            </n-grid>
        </div>
        <!-- 独家放送 -->
        <div class='recommend-private'>
            <TitleNav title="独家放送"></TitleNav>
            <n-grid x-gap="12" :cols="3">
                <n-gi v-for="item in privateList" :key="item.id">
                    <div class="private-item cursor-pointer">
                        <div class="circle">
                            <n-icon :component="Play" color="#fff" size="20"></n-icon>
                        </div>
                        <img style="width: 100%; height: auto;border-radius: 8px;" :src="item.sPicUrl" alt="" />
                    </div>
                    <p class="title cursor-pointer">{{ item.name }}</p>
                </n-gi>
            </n-grid>
        </div>
        <!-- 最新音乐 -->
        <div class='recommend-new'>
            <TitleNav title="最新音乐"></TitleNav>
            <n-grid x-gap="32" y-gap="12" :cols="3">
                <n-gi v-for="item in newSongList" :key="item.id">
                    <div class="song-item cursor-pointer">
                        <div class="song-img-wrap">
                            <img style="width: auto; height: 100%" :src="item.picUrl" :alt="item.name" />
                            <div class="play-icon">
                                <n-icon size="14" :component="Play" color="#ec4141" />
                            </div>
                        </div>
                        <div class="song-info">
                            <p class="song-title">{{ item.name }}</p>
                            <p class="song-author">{{ item.song.artists.map(item => item.name).join(' ') }}</p>
                        </div>
                    </div>
                </n-gi>
            </n-grid>
        </div>
        <!-- 推荐MV -->
        <div class='recommend-mv'>
            <TitleNav title="推荐MV"></TitleNav>
            <n-grid x-gap="12" :cols="3">
                <n-gi v-for="item in mvList" :key="item.id">
                    <div class="private-item cursor-pointer">
                        <div class="play-count-icon">
                            <n-icon size="18" :component="Play20Regular" color="#fff" />
                            <span>{{ handlePlayCount(item.playCount) }}</span>
                        </div>
                        <img style="width: 100%; height: auto;border-radius: 8px;" :src="item.picUrl" alt="" />
                    </div>
                    <p class="title cursor-pointer">{{ item.name }}</p>
                    <p class="artistName cursor-pointer">{{ item.artistName }}</p>
                </n-gi>
            </n-grid>
        </div>
        <!-- 播客 -->
        <!-- <div class='recommend-podcast'>
            <TitleNav title="播客"></TitleNav>
            <n-grid :x-gap="12" :cols="5">
                <n-grid-item v-for="item in songList" :key="item.id">
                    <SongSheetItem :title="item.name" :playCount="item.playCount" :imgUrl="item.picUrl"></SongSheetItem>
                </n-grid-item>
            </n-grid>
        </div> -->
    </div>
</template>

<style lang='scss' scoped>
.recommend {
    width: 80%;
    margin: 0 auto;
    padding-bottom: 30px;

    // 轮播图
    .carousel {
        height: 230px;
        padding-bottom: 20px;
        box-sizing: content-box;

        .carousel-item {
            width: 621px;

            .carousel-img {
                margin: 0 auto;
                width: 100%;
                height: 210px;
                object-fit: cover;
                border-radius: 8px;
                cursor: pointer;
                vertical-align: middle;
            }

            .carousel-title {
                position: absolute;
                padding: 4px 8px;
                background-color: #cc4a4a;
                color: #fff;
                right: 0px;
                bottom: 0;
                font-size: 12px;
                border-top-left-radius: 8px;
                border-bottom-right-radius: 8px;
            }


        }

        .custom-arrow {
            display: flex;
            position: absolute;
            // bottom: 20px;
            width: 100%;
            top: 50%;
            height: 0;
            justify-content: space-between;
            transform: translateY(-20px);
            padding: 0 20px;

            button {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 28px;
                height: 28px;
                color: #fff;
                background-color: rgba(122, 122, 122, 0.3);
                border-width: 0;
                border-radius: 8px;
                transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                cursor: pointer;

                &:hover {
                    background-color: rgba(122, 122, 122, 0.2);
                }

                &:active {
                    transform: scale(0.95);
                    transform-origin: center;
                }
            }

            .custom-arrow--left {
                left: 0;
            }
        }

        .custom-dots {
            display: flex;
            margin: 0;
            padding: 0;
            position: absolute;
            bottom: 0px;
            left: 50%;
            transform: translateX(-50%);

            li {
                display: inline-block;
                width: 12px;
                height: 4px;
                margin: 0 3px;
                border-radius: 4px;
                background-color: #e6e6e6;
                transition: width 0.3s, background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                cursor: pointer;

                &.is-active {
                    width: 40px;
                    background: #ec4141;
                }
            }
        }
    }

    // 推荐歌单
    .recommend-song {
        @include titleGap()
    }

    // 独家放送
    .recommend-private {
        @include titleGap();

        .title {
            font-size: 20px;
            color: #333;
            margin-top: 10px;
            line-height: 28px;
        }

        .private-item {
            position: relative;

            .circle {
                position: absolute;
                top: 10px;
                left: 10px;
                background-color: rgba(0, 0, 0, .6);
                border: 1px solid #8f8f8f;
                border-radius: 50%;
                width: 34px;
                height: 34px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
    }

    // 最新音乐
    .recommend-new {
        @include titleGap();

        .song-item {
            height: 50px;
            display: flex;
            align-items: center;
            border-radius: 6px;
            transition: .3s;

            &:hover {
                background-color: #eaeaea;
            }

            .song-img-wrap {
                height: 100%;
                border-radius: 6px;
                overflow: hidden;
                position: relative;

                .play-icon {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    background-color: #ffffffe1;
                    transform: translate(-50%, -50%);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border-radius: 50%;
                    width: 26px;
                    height: 26px;
                    transition: .7s;

                    .n-icon {
                        transform: translateX(1px)
                    }
                }
            }

            .song-info {
                display: flex;
                flex-direction: column;
                justify-content: center;
                gap: 4px;
                margin-left: 8px;

                .song-title {}

                .song-author {
                    color: #959595;
                    font-size: 12px;
                }
            }
        }
    }

    .recommend-mv {
        @include titleGap();

        .private-item {
            position: relative;

            .play-count-icon {
                position: absolute;
                top: 10px;
                right: 10px;
                color: #fff;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 4px;
            }
        }

        .title {
            line-height: 20px;
            font-size: 16px;
        }

        .artistName {
            line-height: 18px;
            font-size: 14px;
            color: #959595;
        }
    }

    .recommend-podcast {
        @include titleGap()
    }

}
</style>